<template>
    <el-form :inline="true" size="medium" @submit.native.prevent @keyup.enter.native="searchActive">
            <span class="search">
                <el-form-item :label="searchTitle">
                    <el-autocomplete
                            v-model="queryString"
                            :placeholder="searchPlaceholder"
                            :fetch-suggestions="querySearch"
                            :trigger-on-focus="false"
                            :value-key="valueKey"
                            size="mini"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="searchActive">查询</el-button>
                </el-form-item>
            </span>
        <el-form-item>|</el-form-item>
        <el-form-item>
            <el-button type="primary"  size="small" @click="mkdir">新建文件夹</el-button>
        </el-form-item>
        <el-form-item> 
            <el-button type="primary"  size="small" @click="upload">上传文件</el-button>
        </el-form-item>
        <slot></slot>
    </el-form>
</template>

<script>
    export default {
        name: "FormAboveFileTable",
        props:{
            title:{
                type:String,
                default: "资源",
            },
            valueKey:{
                type:String,
                default: "name",
            },
            querySearch:{
                type: Function,
                default: (queryString, cb)=>{
                    cb([]);
                },
            }
        },
        data(){
            return{
                queryString:"",
            };
        },
        methods:{
            searchActive(){
                this.$emit("search-clicked", this.queryString);
                this.queryString = "";
            },
            mkdir(){
                this.$emit('mkdir-clicked');
            },
            upload(){
                this.$emit('upload-clicked');
            }
        },
        computed:{
            searchTitle(){
                return`搜索${this.title}:`;
            },
            searchPlaceholder(){
                return`用空格分隔关键字`;
            },
        }
    }
</script>

<style scoped>

</style>